<template>
	<view>
		<u-sticky bgColor="#a3d8f5">
			<view class="mainpadding" :style="{paddingTop:menutop+'rpx'}">
				<view class="flexleft">
					<image src="@/static/image/system/hsz.png" class="hszclass" mode=""></image>
					<view class="xiaobai fonweight" style="font-size: 35rpx;">红十字基金会“孤寡老人大病救助基金”</view>
				</view>
				<view class="margin_top flexbetween">
					<view class="topliclass"></view>
					<view class="xiaobai fonweight sanshier" style="font-size: 32rpx;">我的</view>
					<image src="@/static/image/system/list.png" mode="" class="topliclass" @click="toplistfn"></image>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding">
			<view class="flexbetween" v-if="!is_login">
				<view class="flexleft" @click="jumpurl('/pages/login/login')">
					<image class="touxiang margin_right2" src="@/static/image/system/weidenglu.png" mode=""></image>
					<view class="bigtext fonweight">未登录，点击登录</view>
				</view>
				<u-icon name="arrow-right" color="#938F90"></u-icon>
			</view>
			<view class="flexbetween" v-if="is_login">
				<view class="flexleft">
					<image class="touxiang margin_right2" :src="userInfo.avatar_text" mode=""></image>
					<view class="">
						<view class="bigtext fonweight">{{userInfo.nickname}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<view class="mainpadding ffffff radius">
				<view class="flexbetween xiahuaxian margin_top2" @click="jumpurl('/pages/mine/yiliaosqlb')">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">我的医疗申请</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<view class="flexbetween xiahuaxian margin_top5" @click="jumpurl('/pages/mine/jiuzhusqlb')">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">我的救助申请</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<view class="flexbetween margin_top5" @click="jumpurl('/pages/mine/wodegysq')">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">我的公益申请</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<!-- <view class="flexbetween xiahuaxian" @click="navto(1)">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">救助解读</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<view class="flexbetween margin_top5 xiahuaxian" @click="navto(2)">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">特邀专家</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<view class="flexbetween margin_top5 xiahuaxian" @click="navto(3)">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">定点医院</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<view class="flexbetween margin_top5 xiahuaxian" @click="navto(5)">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">医疗申请</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view>
				<view class="flexbetween margin_top5" @click="navto(6)">
					<view class="flexleft">
						<view class="cion margin_right1">
							<image src="@/static/image/system/hsz.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">公益报名</view>
					</view>
					<u-icon name="arrow-right" color="#938F90" size="14"></u-icon>
				</view> -->
			</view>
		</view>
		<view class="mainpadding gudingdb" v-if="is_login">
			<view class="bigbtn" @click="show=true">退出登录</view>
		</view>
		<u-modal :show="show" cancelColor="#555" confirmColor="#F13A3A" :showCancelButton="true" :title="title"
			@cancel="show=false" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// #ifdef H5
				menutop: 80,
				// #endif
				// #ifdef MP-WEIXIN
				menutop: 0,
				// #endif	
				is_login: false,
				userInfo: {},
				show: false,
				title: '确定要退出当前账户么？',
				contactshow: false,
				system: {}
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '红十字基金会“孤寡老人大病救助基金”',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		onShareTimeline: function() {
			return {
				title: '红十字基金会“孤寡老人大病救助基金”',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			console.log(this.is_login);
			if (this.is_login) {
				this.init()
			} else {
				this.userInfo = {}
			}
		},
		methods: {
			jumpurl(url){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			navto(val){
				if (val == 0) { //首页
					console.log("首页");
					uni.switchTab({
						url:"/pages/index/index"
					})
				}
				if (val == 1) { //救助解读
					console.log("救助解读");
					uni.navigateTo({
						url:"/pages/zhengce/zhengcejd"
					})
				}
				if (val == 2) { //特邀专家
					console.log("特邀专家");
					uni.navigateTo({
						url:"/pages/index/teyaozj"
					})
				}
				if (val == 3) { //定点医院
					console.log("定点医院");
					uni.navigateTo({
						url:"/pages/index/dingdianyy"
					})
				}
				if (val == 4) { //救助申请
					console.log("救助申请");
					uni.switchTab({
						url:"/pages/jiuzhu/jiuzhu"
					})
				}
				if (val == 5) { //医疗申请
					console.log("医疗申请");
					uni.navigateTo({
						url:"/pages/index/yiliaosq"
					})
				}
				if (val == 6) { //公益报名
					console.log("公益报名");
					uni.navigateTo({
						url:"/pages/zhengce/gongyibm"
					})
				}
			},
			confirm() {
				this.show = false;
				// 将存储的数据改为空达到退出登录的效果
				uni.clearStorageSync()
				httpRequest.toast("退出登录成功")
				this.is_login = false
				this.userInfo = {}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.cion {
		width: 38rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
.touxiang {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
</style>